<template>
  <div>
    <el-card class="card1">
      <div class="user">
        <img
          class="user-profile__avatar"
          src="https://foruda.gitee.com/images/1723603502796844527/03cdca2a_716974.gif"
        />
        <div class="user-details">
          <span class="username">{{ userInfo.teaName || "张老师" }}</span>
          <p class="welcome-message">欢迎回来！今天是 {{ currentDate }}</p>
        </div>
        <el-button class="btn" type="primary" @click="openDialog">编辑资料</el-button>
      </div>
    </el-card>
    <main>
      <el-card style="height: 100%">
        <div class="info">
          <div class="info-row" style="display: flex; gap: 20px">
            <!-- 基本信息 -->
            <div class="basic-info">
              <h3>基本信息</h3>
              <div>
                <div class="user-info">
                  <span class="info1">姓名:</span>
                  <span>{{ userInfo.teaName }}</span>
                </div>
                <div class="user-info">
                  <span class="info1">职工号：</span>
                  <span>{{ userInfo.staffId }}</span>
                </div>
              </div>
            </div>

            <div class="contact-info">
              <h3>联系方式</h3>
              <div>
                <div class="user-info">
                  <span class="info1">手机:</span>
                  <span>{{ userInfo.teaPhone }}</span>
                </div>
                <div class="user-info">
                  <span class="info1">邮箱:</span>
                  <span>{{ userInfo.teaEmail }}</span>
                </div>
              </div>
            </div>

            <div class="clazz-man">
              <h3>管理班级</h3>
              <div class="clazz-list">
                <div v-for="(clazz, index) in classes" :key="index" class="clazz-block">
                  <h4>{{ clazz.name }}</h4>
                  <a href="http://localhost:3000/student/index#/student/index">
                    <el-icon class="right-icon"><ArrowRight /></el-icon>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </main>

    <el-card class="notice-card">
      <h3>
        <el-icon><Megaphone /></el-icon>
        通知与公告
      </h3>
      <div class="notice-list">
        <div v-for="(notice, index) in notices" :key="index" class="notice-item">
          <div class="notice-header">
            <el-icon class="notice-icon"><Document /></el-icon>
            <h4 class="notice-title">{{ notice.title }}</h4>
          </div>
          <p class="notice-content">{{ notice.content }}</p>
          <p class="notice-date">{{ notice.date }}</p>
        </div>
      </div>
    </el-card>

    <el-dialog v-model="dialogVisible" title="编辑资料" width="40%">
      <el-form :model="tempUserInfo" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="tempUserInfo.teaName" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机">
          <el-input v-model="tempUserInfo.teaPhone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="tempUserInfo.teaEmail" placeholder="请输入邮箱"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelEdit">取消</el-button>
          <el-button type="primary" @click="saveChanges">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { teacherInfo, teacherClass, updateTeacherInfo, UserInfo } from "@/api/user/user";

// 定义通知与公告接口
interface Notice {
  title: string;
  content: string;
  date: string;
}

// 用户信息
const userInfo = ref<UserInfo>({} as UserInfo);

// 临时存储的用户信息
const tempUserInfo = reactive<UserInfo>({} as UserInfo);
// 对话框显示状态
const dialogVisible = ref(false);

// 获取教师信息
const getTeacherInfo = async () => {
  userInfo.value = await teacherInfo();
  await getTeacherClass();
};
// 获取教师管理班级信息
const getTeacherClass = async () => {
  const res = await teacherClass();
  let list = <any>[];
  res.forEach((item: any) => {
    let obj = {
      name: item,
    };
    list.push(obj);
  });
  classes.value = list;
};
// 打开对话框并初始化临时数据
const openDialog = () => {
  // 将 userInfo 复制到 tempUserInfo
  tempUserInfo.teaName = userInfo.value.teaName;
  tempUserInfo.teaPhone = userInfo.value.teaPhone;
  tempUserInfo.teaEmail = userInfo.value.teaEmail;
  dialogVisible.value = true;
};

// 保存修改
const saveChanges = async () => {
  console.log("请求参数:", tempUserInfo);
  await updateTeacherInfo({ ...tempUserInfo, staffId: userInfo.value.staffId });
  await getTeacherClass();
  dialogVisible.value = false;
  Object.assign(tempUserInfo, {});
  ElMessage.success("修改成功！");
  await getTeacherInfo();
};

// 取消编辑
const cancelEdit = () => {
  dialogVisible.value = false;
};

// 模拟班级数据
const classes = ref([{ name: "" }]);

// 模拟通知与公告数据
const notices = ref<Notice[]>([
  {
    title: "重要通知",
    content: "本周六下午举行教学研讨会，请各位老师准时参加。",
    date: "2025-04-05",
  },
  {
    title: "公告",
    content: "新的教学资料已上传至共享文件夹，请各位老师及时下载。",
    date: "2025-04-04",
  },
]);

// 当前日期
const currentDate = ref(new Date().toLocaleDateString());

onMounted(async () => {
  await getTeacherInfo();
});
</script>

<style scoped>
.card1 {
  position: relative;
  margin: 10px 20px;
  height: auto;
  padding: 10px;
  background-color: #f9fafb;
  border-radius: 10px;
}

.user {
  display: flex;
  align-items: center;
}

.user-profile__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
}

.user-details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.username {
  font-size: 18px;
  font-weight: bold;
}

.welcome-message {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.btn {
  margin-left: auto;
}

main {
  margin: 20px;
}

.info {
  .info-row {
    display: flex;
    gap: 20px;
  }

  .basic-info,
  .contact-info,
  .clazz-man {
    width: 30%;
    padding: 10px;
    border-radius: 10px;
    background-color: #f9fafb;
    box-shadow: none;
  }

  h3 {
    font-weight: bold;
    margin-bottom: 10px;
  }

  .user-info {
    margin-bottom: 10px;

    span:first-child {
      display: inline-block;
      width: 70px;
    }

    span:last-child {
      font-weight: 500;
    }
  }
  .info1 {
    font-weight: 400;
  }
  .clazz-man {
    .clazz-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .clazz-block {
      position: relative;
      height: 60px;
      width: 40%;
      padding: 5px;
      border-radius: 10px;
      background-color: #ffffff;
      .right-icon {
        position: absolute;
        right: 5px;
        top: 39%;
        display: flex;
        color: #3b82f6;
      }

      h4 {
        font-weight: 400;
        margin: 5px 0;
        line-height: 40px;
      }

      p {
        font-size: 14px;
        margin: 5px 0;
      }

      .icon {
        color: #3b82f6;
        float: right;
      }
    }
  }
}

.notice-card {
  margin: 10px 20px;
  padding: 0 10px;
  border-radius: 10px;
  background-color: #f9fafb;
}

.notice-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notice-item {
  padding: 10px;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.notice-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.notice-icon {
  color: #3b82f6;
  font-size: 20px;
}

.notice-title {
  color: #3b82f6;
  font-size: 16px;
  margin: 0;
}

.notice-content {
  margin-bottom: 8px;
}

.notice-date {
  font-size: 12px;
  color: #999;
}
</style>
